<template>
  <div class="header">
    <span class="title">质量基础设施一站式服务平台</span>
    <div class="header_right">
      <el-popover class="box-item" :width="250" placement="bottom">
        <template #reference>
          <div style="display: flex; align-items: center" v-if="noticeInfo.length>0">
            <el-icon :size="16">
              <div class="dot"></div>
              <BellFilled />
            </el-icon>
            <span style="margin: 0px 8px">消息</span>
          </div>
        </template>
        <div class="infolist">
          <div class="info" v-for="item in noticeInfo">{{ item }}</div>
        </div>
      </el-popover>
      <el-icon :size="16">
        <Avatar />
      </el-icon>
      <span style="margin: 0px 8px">{{ userInfo?.userName || "" }}</span>
      <el-divider direction="vertical" />
      <el-popconfirm title="是否退出登录？" @confirm="logout()">
        <template #reference s>
          <span class="logout">
            <img src="@/assests/logout.png" class="logout_img" />
            <span> 退出 </span>
          </span>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>
<script setup>
import { BellFilled, Avatar } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
let userInfo;
if (sessionStorage.getItem("userInfo") !== "undefined") {
  userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
}
const router = useRouter();
function logout() {
  sessionStorage.setItem("loginToken", "");
  sessionStorage.setItem("userInfo", "");
  router.push("/login");
}
// 消息
const noticeInfo = reactive([
  // "xxxx参建单位认证申请初审通过",
  // "xxxx参建单位认证申请初审通过",
]);
</script>
<style lang="scss">
.header {
  color: white;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #4688f6;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;

  .title {
    font-size: 18px;
  }
}

.logout_img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.logout {
  display: flex;
  align-items: center;
}

.header_right {
  display: flex;
  align-items: center;
}

.dot {
  position: absolute;
  top: -2px;
  right: -2px;
  vertical-align: text-top;
  display: inline-block;
  margin-left: 4px;
  background-color: red;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.infolist {
  text-align: center;
}

.info {
  display: flex;
  justify-content: center;
}
</style>
